<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/封装的函数.js"></script>
    <style>
        @font-face {
            font-family: "clockIcon";
            src: url(../../font/clockicons.woff2);
        }

        .warp {
            border: 1px solid #333;
            border-bottom: 0;
            width: 350px;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 60px;
        }

        .font {
            font-size: 20px;
            margin-bottom: 10px;
        }

        #time {
            font-family: "clockIcon";
            line-height: 54px;
        }

        #date {
            margin-top: 20px;
            font-size: 18px;
        }

        li {
            list-style: none;
            /* width: 50px; */
            width: -webkit-calc(100% / 7);
            text-align: center;
        }

        #box {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
            flex-wrap: wrap;
            width: 350px;
            height: 350px;
            border: 1px solid #333;
        }

        .onclickWarp {
            width: 350px;
            border: 1px solid #333;
            border-bottom: 0;
            display: flex;
            justify-content: space-around;
            text-align: center;
            line-height: 50px;
        }

        #paev,
        #next {
            width: -webkit-calc(100% / 7);
            user-select: none;
        }
    </style>
</head>

<body>
    <div class="warp">
        <span class="font">现在的时间</span>
        <div id="time">00:00:00</div>
        <div id="date">2021年8月21日</div>
    </div>
    <div class="onclickWarp">
        <div id="paev">&lt;</div>
        <div id="center"></div>
        <div id="next">&gt;</div>
    </div>
    <div id="box"></div>
</body>
<script>
    //27.传入一个日期, 返回该月的第一天 是星期几 ? (星期天)
function week(day) {
    var date = day == undefined ? new Date() : new Date(day);//获取传入的日期
    date.setDate(1); //将日期改为该月的第一天
    var week = date.getDay(); //获取该日（该月的第一天）期是周几
    week = week == 0 ? 7 : week; //如果0则+7该为7（为星期天），因为默认星期天为0
    return week; //返回星期几
}

//28.传入一个日期, 返回该日期对应的上个月有多少天 ? (上个月)
function beforeMonthDay(day) {
    var date = day == undefined ? new Date() : new Date(day);//获取传入的日期
    date.setDate(0); //将当月的号数改为0号（也就是上个月的最后一天），由此可以判断上个月有多少天
    var sum = date.getDate(); //再获取号数（几号）
    return sum;
}

//29.传入一个日期, 返回该日期对应的月有多少天 ? (当前月)
function monthDay(day) {
    var date = day == undefined ? new Date() : new Date(day);//获取传入的日期
    date.setDate(1);
    var month = date.getMonth(); //获取传入日期的月份
    date.setMonth(month + 1); //将月份+1，默认月份是0-11
    date.setDate(0); //将当月的号数改为0号（也就是上个月的最后一天），由此可以判断上个月有多少天
    var sum = date.getDate(); //再获取号数（几号）
    return sum;
}
</script>
<script>
    var time = document.getElementById("time");
    var dates = document.getElementById("date");

    var box = document.getElementById("box");
    var paev = document.getElementById("paev");
    var center = document.getElementById("center");
    var next = document.getElementById("next");
    var date = new Date();
    calender();
    paev.onclick = function () {
        date.setDate(1);
        date.setMonth(date.getMonth() - 1);
        calender();
    }
    next.onclick = function () {
        date.setDate(1);
        date.setMonth(date.getMonth() + 1);
        calender();
    }
    //日期时间
    nowTime();
    setInterval(nowTime, 1000);
    function nowTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();

        dates.innerText = `${year}年${beauty(month + 1)}月${beauty(day)}日`;
        time.innerText = `${hour}:${beauty(minute)}:${beauty(second)}`;
    }
    function beauty(num) {
        return num < 10 ? "0" + num : num;
    }

    //日历
    function calender() {
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        center.innerText = `${year}年${beauty(month)}月`;

        var weeks = week(date); //获取该月第一天是周几
        var upDay = beforeMonthDay(date); //获取上个月有多少天
        var nowDay = monthDay(date); //获取本月有多少天
        var lastStar = upDay - (weeks - 1) + 1; //上个月的起始值
        var downEnd = 42 - (weeks - 1) - nowDay; //下个月的终止值

        var str = `<li>一</li>
                <li>二</li>
                <li>三</li>
                <li>四</li>
                <li>五</li>
                <li>六</li>
                <li>日</li>`;

        //获取上个月的号数
        var now = new Date();
        var toYear = now.getFullYear();
        var toMonth = now.getMonth() + 1;
        var toDay = now.getDate(); //当天日期

        var html = "";  //html拼接 lix42
        for (var i = lastStar; i <= upDay; i++) {
            html += `<li style=color:gray;>${i}</li>`;
        }
        //获取本月的号数
        for (var i = 1; i <= nowDay; i++) {
            if (toYear == year && toMonth == month && toDay == i) {
                html += `<li style=color:#6ff;>${i}</li>`;
            } else {
                html += `<li>${i}</li>`;
            }
        }
        //获取下个月的号数
        for (var i = 1; i <= downEnd; i++) {
            html += `<li style=color:gray;>${i}</li>`;
        }
        box.innerHTML = str + html;
    }
</script>

</html>